<template>
	<div :style="{'top':top+'px'}" id="main-div">
		<div class="tool-main" id="content">
			<div class="top" id="top-content">
				<div class="title">
					<img src="../assets/logo.png" height="30px" />
				</div>
				<div style="display: flex;padding: 10px;">
					<i class="fa fa-window-maximize" @click="showMaxWin"></i>
					<i class="fa fa-thumb-tack" :style="{'transform':fit?'rotate(90deg)':'rotate(0deg)'}" @click="setTop"></i>
					<i class="fa fa-close" @click="closeMiniTool"></i>
				</div>
			</div>
			<div class="plane">
				<div class="item" v-for="(item,index) in todoList" :index="index" v-if="index<2||showMorePlane">
					<input v-model="item.checked" v-show="showMorePlane" type="checkbox" @click="checkFun(index)" />
					<span>{{item.title}}</span>
					<div class="menu">
						<i class="fa more" :class="{'fa-angle-right':showMoreMenu,'fa-angle-left':!showMoreMenu}" @click="changeMore(index)"></i>
						<i v-if="showMoreMenu" class="fa fa-close" title="删除" @click="remove(index)"></i>
						<i class="fa fa-check" title="完成" @click="finishWork(index)"></i>
					</div>
				</div>
				<div style="text-align: center;padding: 20px;color: #7f8c8d;" v-if="todoList.length==0">无任务</div>
			</div>
			<div class="more-plane" v-if="todoList.length>0">
				<div class="left">
					<input v-show="showMorePlane" @click="checkAllFun" type="checkbox" v-model="checkAll" />
					<span v-show="showMorePlane">全选</span>
				</div>
				<div class="right">
					<div class="bottom-menu" :class="{'deep-color':hasSelect}" v-show="showMorePlane">
						<div class="item">预排</div>
						<div class="item">延期</div>
						<div class="item">删除</div>
						<div class="item">完成</div>
					</div>
					<div @click="showMorePlaneFun(true)" v-if="!showMorePlane" class="item show-more">更多 <i class="fa fa-angle-down"></i></div>
					<div @click="showMorePlaneFun(false)" v-if="showMorePlane" class="item show-more">收起 <i class="fa fa-angle-up"></i></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	const schedule = require('node-schedule');
	const nedb = require('nedb');
	var ipcRenderer;
	if (window.require) {
		ipcRenderer = window.require('electron').ipcRenderer;
	}
	import {
		globalBus
	} from '@/assets/js/globalBus.js';
	export default {
		components: {},
		name: 'miniTool',
		updated() {
			var mainDiv = document.getElementById("main-div");
			var offsetHeight = mainDiv.offsetHeight;
			if (ipcRenderer) {
				if (this.top < 0) {
					ipcRenderer.send("mini-set-size", 12)
					ipcRenderer.send("mini-win-ignore-mouse")
				} else {
					ipcRenderer.send("mini-set-size", offsetHeight)
					ipcRenderer.send("mini-win-close-ignore-mouse")
				}
			}
		},
		data() {
			return {
				top: 0,
				fit: true,
				showMoreMenu: false,
				showMorePlane: false,
				hasSelect: false,
				checkAll: false,
				todoList: [],
				aplaneTodoDb: {},
			}
		},
		mounted() {
			var _this = this;
			var mainDiv = document.getElementById("main-div");

			if (ipcRenderer) {
				var offsetHeight = mainDiv.offsetHeight;
				ipcRenderer.send("mini-set-size", offsetHeight)
				//监听窗口变化
				ipcRenderer.on('mini-resize', (event, data) => {
					var offsetHeight = mainDiv.offsetHeight;
					ipcRenderer.send("mini-set-size", offsetHeight)
				});
				//监听窗口变化
				ipcRenderer.on('mini-top', (event, data) => {
					if (data == "true") {
						this.top = -mainDiv.offsetHeight + 8;
					} else {
						this.top = 0;
					}
				});
				ipcRenderer.on('mini-plane-refresh-call', (res) => {
					_this.loadPlane();
				});

				mainDiv.onmouseover = function() {
					if (_this.top <= 0) {
						_this.top = 0;
						ipcRenderer.send("mini-win-show")
					}
				}

				//每天下午:
				//schedule.scheduleJob('30 0 17 * * *', () => {
				schedule.scheduleJob('30 0 17 * * *', () => {
					ipcRenderer.send("show-notification",{
						title:"爱工作-提醒",
						body:"快下班啦！记得发送日报哦！"
					});
				});
			}
			this.loadPlane();
		},
		methods: {
			remove(index) {
				var _this = this;
				if (confirm('确认删除"' + this.todoList[index].title + '"吗?') == true) {
					// 删除
					_this.aplaneTodoDb.remove({
						_id: _this.todoList[index]._id
					}, {}, function(err, numRemoved) {
						_this.todoList.splice(index, 1);
						_this.refreshMain();
					});
				}
			},
      //完成任务
      finishWork(index) {
      	var _this = this;
      	var data = this.todoList[index];
      data.status = '已完成';
      	var finishTag = 0;
      	var finishFun = function() {
      		finishTag++;
      		if (finishTag == 2) {
      			_this.todoList.splice(index, 1);
      			_this.refreshMain();
      		}
      	}
      	_this.updateBeforeAndNext(data, 'before', finishFun);
      	var nextDate = new Date(data.year, data.moth, data.date);
      	nextDate = new Date(nextDate.setDate(nextDate.getDate() + 1));
      	_this.updateBeforeAndNext({
      		year: nextDate.getFullYear(),
      		moth: nextDate.getMonth(),
      		date: nextDate.getDate(),
      		title: data.title,
      		status: data.status,
      	}, 'after', finishFun);
      },
      //如果这是一个延期工作 更新时候全部更新
      updateBeforeAndNext(data, to, callBack) {
      	var _this = this;
      	var db;
      	if (_this.loadDate.year != data.year || _this.loadDate.moth != data.moth) {
      		db = new nedb({
      			filename: '/data/aplane-todo_' + data.year + '-' + data.moth + '.db',
      			autoload: true
      		});
      	} else {
      		db = _this.aplaneTodoDb;
      	}
      	db.find({
      		year: data.year,
      		moth: data.moth,
      		date: data.date,
      		title: data.title,
      	}, (err, docs) => {
      		if (docs.length > 0) {
      			docs[0].status = data.status;
      			_this.aplaneTodoDb.update({
      				_id: docs[0]._id
      			}, docs[0], {}, (err, ret) => {
      				var nextDate = new Date(data.year, data.moth, data.date);
      				if (to == 'before') {
      					nextDate = new Date(nextDate.setDate(nextDate.getDate() - 1));
      				} else if (to == 'after') {
      					nextDate = new Date(nextDate.setDate(nextDate.getDate() + 1));
      				}
      				_this.updateBeforeAndNext({
      					year: nextDate.getFullYear(),
      					moth: nextDate.getMonth(),
      					date: nextDate.getDate(),
      					title: data.title,
      					status: data.status,
      				}, to, callBack);
      			});
      		} else {
      			callBack();
      		}
      	});
      },/* 
			//完成任务
			finishWork(index) {
				var _this = this;
				var data = this.todoList[index];
				_this.aplaneTodoDb.find({
					_id: data._id
				}, function(err, docs) {
					if (docs.length == 1) {
						var data = docs[0];
						data.status = '已完成';
						_this.aplaneTodoDb.update({
							_id: data._id
						}, data, {}, (err, ret) => {
							_this.todoList.splice(index, 1);
							_this.refreshMain();
						});
					} else {
						Swal.fire({
							title: `操作失败`,
							icon: 'error'
						})
					}
				})
			}, */
			loadPlane() {
				var _this = this;
				var currentDate = new Date();
				var year = currentDate.getFullYear(); //得到年份
				var moth = currentDate.getMonth(); //得到月份
				var date = currentDate.getDate(); //得到日期
				this.aplaneTodoDb = new nedb({
					filename: '/data/aplane-todo_' + year + '-' + moth + '.db',
					autoload: true
				});
				setTimeout(function() {
					// 查询所有结果集
					_this.aplaneTodoDb.find({
						year: year,
						moth: moth,
						date: date,
						status: '进行中'
					}, function(err, docs) {
						_this.todoList = docs;
					})
				}, 50)
			},
			showMaxWin() {
				if (ipcRenderer) {
					ipcRenderer.send("main-win-open")
				}
			},
			setTop() {
				this.fit = !this.fit;
				if (ipcRenderer) {
					ipcRenderer.send("mini-set-top", this.fit)
				}
			},
			closeMiniTool() {
				if (ipcRenderer) {
					ipcRenderer.send("mini-close")
				}
			},
			checkFun(index) {
				this.checkAll = true;
				this.hasSelect = false;
				for (var x in this.todoList) {
					if (index == x) {
						continue
					}
					if (this.todoList[x].checked) {
						this.hasSelect = true;
					} else {
						this.checkAll = false;
					}
				}
				if (this.todoList[index].checked) {
					this.checkAll = false;
				} else {
					this.hasSelect = true;
				}
			},
			checkAllFun() {
				for (var x in this.todoList) {
					this.todoList[x].checked = !this.checkAll;
				}
				this.hasSelect = !this.checkAll;

				if (!this.showMorePlane && !this.checkAll) {
					this.showMorePlane = true;
				}
			},
			showMorePlaneFun(show) {
				this.showMorePlane = show
			},
			changeMore(index) {
				this.showMoreMenu = !this.showMoreMenu
			},
			choiceMenuFun(menu) {
				this.choiceItem = menu;
				var url = "/setting/" + menu;
				this.$router.push(url).catch(err => {
					err
				})
			},
			refreshMain() {
				if (ipcRenderer) {
					ipcRenderer.send('main-plane-refresh');
				}
			},
		}
	}
</script>

<style lang="less">
	html {
		min-height: 0 !important;
	}

	#main-div {
		box-sizing: border-box;
		padding: 4px;
		position: relative;
		transition: all 0.2s linear;
	}

	.tool-main {
		box-shadow: 0 0 4px #7f8c8d;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;

		* {
			transition: all 0.1s linear;
			font-size: 0.8rem;
		}

		.more-plane {
			flex: 1;
			display: flex;
			color: #7f8c8d;
			border-top: 1px #ecf0f1 solid;
			padding: 8px 10px;

			.right {
				display: flex;

				.bottom-menu.deep-color {
					color: #7f8c8d;
				}

				.bottom-menu {
					display: flex;
					color: #dfe0e1;
				}

				.show-more {
					border-left: 1px #e6e9ea solid;
					padding-left: 10px;
				}

				.item {
					margin-left: 10px;
					cursor: pointer;
				}

				.item:hover {
					color: #2980b9;
				}
			}

			.left {
				flex: 1;

				input {
					margin: 0;
					position: relative;
					top: 1px;
				}
			}
		}

		.plane {
			color: #4c5354;
			font-size: 0.8rem;

			.item:hover {
				background: #f6f7f8;

				.menu {
					display: block;
				}
			}

			.item {
				padding: 6px 10px;
				font-size: 0.8rem;
				position: relative;

				input {
					margin: 0;
					position: relative;
					top: 1px;
				}

				span {
					margin-right: 3rem;
				}

				.menu {
					display: none;
					z-index: 2;
					position: absolute;
					right: 10px;
					top: 6px;

					.more {
						padding-right: 8px;
						border-right: 1px #d8dbdc solid;
					}

					i {
						line-height: 1rem;
						transition: all 0.2s linear;
						cursor: pointer;
						color: #95a5a6;
						margin-left: 8px;
					}

					i:hover {
						color: #2980b9;
					}

					.fa-close:hover {
						color: #e74c3c;
					}
				}
			}

		}

		.top {
			box-sizing: border-box;
			line-height: 1rem;
			display: flex;
			width: 100%;
			font-size: 0.8rem;
			border-bottom: 1px #ecf0f1 solid;

			.title {
				margin-top: 3px;
				//padding: 10px;
				color: #7f8c8d;
				flex: 1;
				-webkit-app-region: drag;
				-webkit-user-select: none;
			}

			i {
				line-height: 1rem;
				transition: all 0.2s linear;
				cursor: pointer;
				color: #95a5a6;
				margin-left: 16px;
			}

			i:hover {
				color: #2980b9;
			}
		}
	}
</style>
